<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // new Promise((resolve, reject) => {
    //   setTimeout(() => {
    //     resolve('一秒延迟');
    //   }, 1000);
    // }).then((res) => {
    //   // 这个函数也会在一秒后执行
    //   console.log(res); // 一秒延迟
    // });

    // 因为函数作用域存在，异步嵌套的时候，变量遮蔽，常量冲突
    // 函数作用域 - 闭包

    // 堆 引用 栈 值
    
    // a -> 对象 - value -> 2
    
    // value -> 1

    let a = { value: 1 }
    const value = a.value
    // const value = a.value
    setTimeout(() => {
      console.log(value)
      a.value = 2
    }, 1000)
    setTimeout(() => {
      console.log(value)
    }, 2000)
    // 回调函数，记住了当前时刻函数外部变量的引用
    // 闭包 就是为了异步存在的


    // setTimeout(() => {
    //   let a
    //   const resolve = (res) => {

    //     // 这个函数也会在一秒后执行
    //     console.log(res); // 一秒延迟
    //     setTimeout(() => {
    //       const resolve = (res) => {
    //         // 这个函数也会在一秒后执行
    //         console.log(res); // 一秒延迟
    //       };
    //       resolve('三秒延迟');
    //     }, 3000);
    //   };
    //   resolve('一秒延迟');
    // }, 1000);

    // // 跳出回调嵌套的作用域
    // let a = 2
    // // 开始 从外面看，是异步的，从里面看，是同步的
    new Promise((res, rej) => {
      setTimeout(() => {
        res(a + 1) //把后面的函数放在这个地方运行了
      }, 1000)
    }).then(
      (res) => {
        console.log(a)
        //这个函数也会在一秒后执行
        console.log(res) //一秒延迟
      }
    )
    // // 结束
    // a = 3


    // 异步的 javascript 和 html

    // fetch().then(res=>res.text()).then(res=>{})

    // let a = 2
    // async function test() {
    //   const res = await new Promise((res, rej) => {
    //     setTimeout(() => {
    //       res(a + 1) //把后面的函数放在这个地方运行了
    //     }, 1000)
    //   })
    //   console.log(a)
    //   //这个函数也会在一秒后执行
    //   console.log(res) //一秒延迟
    // }
    // test()
    // a = 3
    // new Promise((lx,lj) =>{
    //   setTimeout(() =>{
    //     lx('一秒后显示快乐')
    //   },1000)
    // }).then(
    //   (lx) => {
    //     console.log(lx);
    //   }
    // )
  </script>
</body>

</html>